<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/schedule.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>Popup editing</title>
    <meta charset="utf-8">
    <link href="${basepath}/css/viewcss/main/workschedule/scheduleform.css" rel="stylesheet" type="text/css"/>
    <style>
    	body {
			padding: 0;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 12px;
		}
		.toolbar{
			height:30px;
			background-color:#F5F5F5;
			border-radius:4px;
			border: 1px solid #CCC;
			padding-top:8px;
		}
		.btndiv{
			text-align:center;
		}
		.btn{
			display: inline-block; 
			width: 80px;
			height: 25px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 10px;
		}
		.querybtn{
			text-align:center;
			display: inline-block; 
			width: 60px;
			height: 18px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 4px;
		}
    </style>
</head>
<script>
	
	$(document).ready(function() {
		$("#querydate").val(new Date().format('yyyy-MM'));
	
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			//defaultDate: '2015-02-12',
			editable: true,
			height:450,
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
			eventLimit: true, // allow "more" link when too many events
			buttonText: {    
                today: '今天',    
                month: '月',    
                week: '周',    
                day: '日'    
                //prev: '上一月',    
                //next: '下一月'    
            },
            dayClick: function(date, allDay, jsEvent, view) {  
            	$("#id").val("");
            	clearForm();
            	$("#starttime").val(new Date(date).format('yyyy-MM-dd hh:mm'));
            	var week = moment(date).format('dddd');
            	if(week=="周六"||week=="周日"){
            		showTbPop();
            	}else{
            		showZjPop();
            	}
            	//console.log("---->date:"+date+";"+new Date(date).format('yyyy-MM-dd hh:mm'));
            	//console.log(new Date(allDay.timeStamp).format('yyyy-MM-dd hh:mm'));
            	//console.log(jsEvent);
            	//console.log("---->view:"+view); 
            },
            eventMouseover:function(event,jsEvent,view ) { 
            	var start = new Date(event._selfData.start).format('yyyy-MM-dd hh:mm');
            	var end = new Date(event._selfData.end).format('yyyy-MM-dd hh:mm');
            	var title = event.title;
            	$('#tiptitle').html(title);
            	$('#tipstart').html("从:"+start);
            	$('#tipend').html("到:"+end);
            	layer.tips($('#tipdiv').html(), this, {tips: [1,event.backgroundColor]});//,time: 1000
            },
            eventClick:function(calEvent, jsEvent, view){ 
            	$("#id").val(calEvent._selfData.id);
            	$("#title").val(calEvent.title);
            	$("#scheduleType").val(calEvent._selfData.scheduleType);
            	$("#dept").val(calEvent._selfData.deptId);
            	loadUser(calEvent._selfData.deptId);
            	$("#assist").val(calEvent._selfData.userId);
            	//$("#starttime").data("kendoDatePicker").value(new Date(calEvent._selfData.start).format('yyyy-MM-dd hh:mm'));
            	//$("#endtime").data("kendoDatePicker").value(new Date(calEvent._selfData.end).format('yyyy-MM-dd hh:mm'));
            	$("#starttime").val(new Date(calEvent._selfData.start).format('yyyy-MM-dd hh:mm'));
            	$("#endtime").val(new Date(calEvent._selfData.end).format('yyyy-MM-dd hh:mm'));
        		$("#content").val(calEvent.content);
            	showZjPop();
            },
            select: function(start, end) {
				var startTime = new Date();
				startTime.setTime(start);
				var endTime = new Date();
				endTime.setTime(end);
			},
			//events: {
			//	url: '${path}/assist/queryScheduler',
			//	data : {querydate : $('#querydate').val() }
			//}
			events: function(start, end, timezone, callback) {
		        $.ajax({
		        	url: '${path}/assist/queryCustCourseApply',
		            dataType: 'json',
		            data:{querydate:$("#querydate").val()},
		            success: function(doc) {
		                var events = [];
		                $.each(doc,function(k,v) {
		                    events.push({
		                        title: v.title,
		                        start: new Date(v.start).format('yyyy-MM-dd hh:mm'),
		                        end: new Date(v.end).format('yyyy-MM-dd hh:mm'),
		                        content:v.content,
		                        color:v.color,
		                        backgroundColor:v.backgroundColor,
		                        borderColor:v.borderColor,
		                        textColor:v.textColor,
		                        _selfData:v
		                    });
		                });
		                callback(events);
		            }
		        });
		    }
		});
	});
	
	var layIndex;
	var showZjPop = function(id){
		var url = "http://oa.dibabo.cn/ShopAdmin/isp/isp_entity/course_open_detail/editpage/course_open_detail_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"早教排课",
			//type: 1,
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
	        area: ['850px', '470px'], //宽高
		    //content: $('#inlineForm'),
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var showTbPop = function(id){
		var url = "http://oa.dibabo.cn/ShopAdmin/isp/isp_entity/care_class_open/EditPage/care_class_open_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"托班排课",
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['850px', '470px'], //宽高
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	//提交
	var subForm = function(){
		var formval = JsonCode(scheduleForm);
		formval = JSON.parse(formval);
		formval.deptname = $('#dept').find("option:selected").text();
		formval.assistname = $('#assist').find("option:selected").text();
		formval = JSON.stringify(formval);
		//var formval = $('#scheduleForm').serialize(); 
		if($('#id').val()){
			$.ajax({
	            url: '${path}/assist/updateWorkSchedule',
	            contentType: "application/json",
	            type:'POST', 
	            data: formval,
	            dataType: 'json',
	            success: function(doc) {
	            	layer.msg(doc.msg, {time: 3000, icon:6});
	            	if(doc.status==1){
	            		layer.close(layIndex);
		            	reflashCal();
	            	}
	            }
	        });
		}else{
			$.ajax({
	            url: '${path}/assist/saveWorkSchedule',
	            contentType: "application/json",
	            type:'POST', 
	            data: formval,
	            dataType: 'json',
	            success: function(doc) {
	            	layer.msg(doc.msg, {time: 3000, icon:6});
	            	if(doc.status==1){
		            	layer.close(layIndex);
		            	reflashCal();
	            	}
	            }
	        });
		}
	}
	
	var queryCalendar = function(){
		$('#calendar').fullCalendar( 'gotoDate',new Date($("#querydate").val()));
		reflashCal();
		//$('#calendar').fullCalendar('refetchEvents');
	}
	
	var reflashCal = function(){
		$('#calendar').fullCalendar('refetchEvents');
	}
	
	var clearForm = function(){
		//$("input[type=reset]").trigger("click");
		//$("#assist option").remove();
	}
</script>
<body class="page-body" >
	<div id="toolbar" class="toolbar">
		<label style="font-size:14px;margin-left:20px;">课表查询月份：</label>
		<input id="querydate" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM'})" 
			style="width:200px;border-radius:4px;margin-left:10px;">
		<a href="#" onclick="queryCalendar()" class="querybtn">查询</a>
	</div>
	
	<div id='calendar' style="width:98%;text-align:center;margin:0 auto;padding:5px"></div>
	
	<div id="inlineForm" style="display:none;padding:30px">
		<form class="bootstrap-frm" action="" method="post" id="scheduleForm" name="scheduleForm">
			<input type="reset" style="display:none;" /> 
			<input type="hidden" name="id" id="id" style="width:200px">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">标题</label>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="title" id="title" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">排班类型</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="scheduleType" id="scheduleType" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">部门</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="dept" id="dept" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">用户</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="assist" id="assist" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">开始日期</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="starttime" id="starttime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">结束时间</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="endtime" id="endtime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">内容</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="content" id="content" style="width:510px;height:100px"></textarea>
                    </td>
                </tr>
            </table>
            <div class="btndiv"><a href="#" onclick="subForm()" class="btn">确定</a></div>
        </form>
	</div>
	
	<div style="display:none" id="tipdiv">
		<div id="tiptitle" style="font-size:12px"></div>
		<div style="font-size:12px">计划时间:</div>
		<div id="tipstart" style="font-size:12px"></div>
		<div id="tipend" style="font-size:12px"></div>
	</div>
</body>
</html>
